import { Form, Input, Button, Table, Popconfirm, Space, Pagination } from 'antd'
import React, { useState, useEffect } from 'react';
import './common_resource_management.scss'
import { useNavigate } from 'react-router-dom'
import CommomAdd from './CommomAdd/CommomAdd'
import CommomDetails from './CommomDetails/CommomDetails'
import http from '../../utils/http'
import store from '../../store/index'
const Common_resource_management = () => {
    // 总条数
    const [total, setTotal] = useState(0)
    const [current, setCurrent] = useState(1)
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 批量删除
    const [batchDel, setBatchDel] = useState([])
    const [data, setData] = useState([])
    // 创造 key 的方法
    function arrKey(data) {
        let arr = data.map((item) => {
            return {
                key: item.annId,
                // 建筑面积
                annArea: item.annArea,
                // 户型图
                annHomephoto: item.annHomephoto,
                // id
                annId: item.annId,
                // 设备情况
                annLabel: item.annLabel,
                // 人民币
                annMoney: item.annMoney,
                // 容纳人数
                annNum: item.annNum,
                // 资源展示图
                annResources: item.annResources,
                // 类型
                annType: item.annType == 0 ? "会议" : "展厅",
                // 地址
                annWhere: item.annWhere,
                // 资源名称
                annName: item.annName,
                // 房间id
                roomId: item.roomId,
                // 编号
                annSerialint: item.annSerialint
            }
        })
        console.log(arr, 'arr');
        setData(arr)

    }

    const getCommon = () => {
        http({
            url: '/announcement/findAnnouncement',
            method: "post",
            params: {
                current: current
            }
        }).then((res) => {
            console.log('ajax', res);
            if (res.code == 200) {
                arrKey(res.data.records)
                setTotal(res.data.total)
                setCurrent(res.data.current)
            }
        })
    }
    useEffect(() => {
        getCommon()
    }, [])



    let navigate = useNavigate()
    // form 表单
    const [form] = Form.useForm();
    const [isCommomAdd, setIsCommomAdd] = useState(false);
    const [isCommomSpace, setIsCommomSpace] = useState(false);
    // 新增
    const commomAdd = () => {
        setIsCommomAdd(true)
        setIsCommomSpace(false)
        navigate('/home/Operate/CommonResourceManagement/CommomAdd')
    }

    // 查询
    const commomQuery = () => {
        const v = form.getFieldsValue(true)
        console.log(v.username);
        http({
            url: "/announcement/findAnnouncement",
            method: "post",
            params: {
                ann_name: v.username
            }
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                arrKey(res.data.records)
                setCurrent(res.data.current)
                setTotal(res.data.total)
            }
        })
    }

    // 重置
    const commomReset = () => {
        form.resetFields("")
        getCommon()
        setSelectedRowKeys([])
    }
    // 详情
    const openSpaceManagement = (text, record, index) => {
        setIsCommomAdd(false)
        setIsCommomSpace(true)
        navigate('/home/Operate/CommonResourceManagement/CommomDetails')
        store.zhangxi.CommonDetails = record
    }
    function cancel(e) {
    }
    // 确定删除
    function confirm(a, b) {
        console.log(b, 'b');
        console.log(batchDel, 'batchDel');
        let tenId = []
        if (b) {
            tenId.push(b.annId)
        } else {
            tenId = batchDel.map((item) => {
                return item.annId
            })
        }

        console.log('tenId', tenId);

        http({
            url: '/announcement/deleteAnnouncement',
            method: 'post',
            data: tenId
        }).then((res) => {
            getCommon()
            console.log(res);
        })
    }
    const columns = [
        {
            title: '公告资源名称',
            dataIndex: 'annName',
        },
        {
            title: '容纳人数',
            dataIndex: 'annNum',
        },
        {
            title: '类型',
            dataIndex: 'annType',
        },
        {
            title: '公共资源编号',
            dataIndex: 'annSerialint',
        },
        {
            title: '建筑面积',
            dataIndex: 'annArea',
        },
        {
            title: '出租单价',
            dataIndex: 'annMoney',
        },
        {
            title: '标签',
            dataIndex: 'annLabel',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record, index) => (
                <Space size="middle">
                    <a href="#" onClick={() => { openSpaceManagement(text, record, index) }}>详情</a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => { confirm(text, record) }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];


    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys)
            setBatchDel(selectedRows)
        },
        getCheckboxProps: (record) => (
            {
                name: record.name,
            })

    };

    if (isCommomSpace) {
        return (

            <div className='CommomRescource_father'>
                <CommomDetails setIsCommomSpace={setIsCommomSpace} />
            </div>
        )
    } else if (isCommomAdd) {
        return (
            <div className='CommomRescource_father'>
                <CommomAdd setIsCommomAdd={setIsCommomAdd} />
            </div>
        )
    } else {
        return (
            <div className='CommomRescource_father'>
                <Form form={form} name="horizontal_login" layout="inline" className='title'>
                    <Form.Item
                        name="username">
                        <div className='kuai'>
                            <span></span>
                            <span>公共资源管理</span>
                        </div>
                    </Form.Item>
                    <Form.Item className='btn'>
                        <div>
                            <Button className='cha'
                                type="primary"
                                onClick={commomAdd}>新增</Button>
                            <Button className='resize' onClick={confirm} type="primary">批量删除</Button>
                        </div>

                    </Form.Item>
                </Form>
                <div className='biao'>
                    <Form form={form} name="horizontal_login" layout="inline" className='Role'>
                        <Form.Item
                            name="username"
                            label='公告资源名称'
                        ><Input placeholder='请输入角色姓名' />
                        </Form.Item>
                        <Form.Item className='btn'>
                            <div>
                                <Button className='cha'
                                    type="primary"
                                    onClick={commomQuery}>查询</Button>
                                <Button className='resize' onClick={commomReset} type="primary">重置</Button>
                            </div>

                        </Form.Item>
                    </Form>
                    <Table className='table1'
                        rowSelection={{
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={data}
                        pagination={false}
                    />

                    <Pagination
                        total={total}
                        current={current}
                        onChange={(e) => {
                            setCurrent(e)
                            console.log('change', current, "e", e);
                            setSelectedRowKeys([])
                            http({
                                url: '/announcement/findAnnouncement',
                                method: "post",
                                params: {
                                    current: e
                                }
                            }).then((res) => {
                                if (res.code === 200) {
                                    arrKey(res.data.records)
                                }

                            })
                        }} />
                </div>
            </div>
        )
    }

};



export default Common_resource_management